.unwrap
  .bg-cover(style="background-image: url(app/img/profile-bg.jpg)")
    .p-xl.text-center.text-white
      img.img-thumbnail.img-circle.thumb128(src='app/img/user/09.jpg', alt="Image")
      h3.m0 Ted Berry
      p Lead director
      p Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus. 
  .text-center.bg-gray-dark.p-lg.mb-xl
    .row.row-table
      .col-xs-4.br
        h3.m0 400
        p.m0 
          span.hidden-xs Profile 
          span Views
      .col-xs-4.br
        h3.m0 2000
        p.m0 Likes
      .col-xs-4
        h3.m0 100
        p.m0 Following
  .p-lg
    .row
      .col-lg-9
        // START timeline
        ul.timeline
          li.timeline-separator(data-datetime="Today")
          // START timeline item
          li
            .timeline-badge.primary
              em.fa.fa-comment
            .timeline-panel
              .popover.left
                .arrow
                .popover-content
                  .table-grid.table-grid-align-middle.mb
                    .col.col-xs
                      img.media-object.img-circle.thumb48(src='app/img/user/05.jpg', alt="Image")
                    .col
                      p.m0 
                        a(href="#").text-muted: strong Aiden Curtis
                        |  posted a comment

                  p: em "Fusce pellentesque congue justo in rutrum. Praesent non nulla et ligula luctus mattis eget at lacus."
          // END timeline item
          // START timeline item
          li.timeline-inverted
            .timeline-badge.green
              em.fa.fa-picture-o
            .timeline-panel
              .popover.right
                .arrow
                .popover-content
                  .table-grid.table-grid-align-middle.mb
                    .col.col-xs
                      img.media-object.img-circle.thumb48(src='app/img/user/04.jpg', alt="Image")
                    .col
                      p.m0 
                        a(href="#").text-muted: strong James Payne
                        |  shared a new idea
                    
                  a(href="#")
                    img.img-responsive(src="app/img/mockup.png", alt="Img")
                  p.text-muted.mv 3 Comments
                  .media.bb.p
                    small.pull-right.text-muted 12m ago
                    .pull-left
                      img.media-object.img-circle.thumb32(src='app/img/user/05.jpg', alt='Image')
                    .media-body
                      span.media-heading
                        p.m0: a(href="#"): strong Aiden Curtis 
                        p.m0.text-muted Hey looks great!
                  .media.bb.p
                    small.pull-right.text-muted 30m ago
                    .pull-left
                      img.media-object.img-circle.thumb32(src='app/img/user/08.jpg', alt='Image')
                    .media-body
                      span.media-heading
                        p.m0: a(href="#"): strong Samantha Murphy
                        p.m0.text-muted Excellento job!
                  .media.bb.p
                    small.pull-right.text-muted 30m ago
                    .pull-left
                      img.media-object.img-circle.thumb32(src='app/img/user/04.jpg', alt='Image')
                    .media-body
                      span.media-heading
                        p.m0: a(href="#"): strong James Payne
                        p.m0.text-muted WIP guys :)
                  form(method='post', action='').mt
                    textarea.form-control.no-resize(placeholder='Comment...', rows="1")


          // START timeline item
          li
            .timeline-badge.info
              em.fa.fa-file-o
            .timeline-panel
              .popover.left
                .arrow
                .popover-content
                  .table-grid.table-grid-align-middle.mb
                    .col.col-xs
                      img.media-object.img-circle.thumb48(src='app/img/user/08.jpg', alt="Image")
                    .col
                      p.m0 
                        a(href="#").text-muted: strong Samantha Murphy
                        |  shared new files
                  ul.list-unstyled
                    li.pb
                      em.fa.fa-file-o.fa-fw.mr
                      a(href='#').text-info framework-docs-part1.pdf
                        em.pull-right.fa.fa-download.fa-fw
                    li.pb
                      em.fa.fa-file-o.fa-fw.mr
                      a(href='#').text-info framework-docs-part2.pdf
                        em.pull-right.fa.fa-download.fa-fw
                    li.pb
                      em.fa.fa-file-o.fa-fw.mr
                      a(href='#').text-info framework-docs-part3.pdf
                        em.pull-right.fa.fa-download.fa-fw
          // END timeline item
          // START timeline item
          li
            .timeline-badge.purple
              em.fa.fa-map-marker
            .timeline-panel
              .popover.left
                .arrow
                .popover-content
                  .table-grid.table-grid-align-middle.mb
                    .col.col-xs
                      img.media-object.img-circle.thumb48(src='app/img/user/08.jpg', alt="Image")
                    .col
                      p.m0 
                        a(href="#").text-muted: strong Samantha Murphy
                        |  shared new location
                  p: em "Hey guys! Please check the new location for tomorrows's meeting."
                  #map(ng-controller="GMapController")
                    .gmap(ui-map='myMap5', ui-options='mapOptions5')

          // END timeline item

          // START timeline separator
          li.timeline-separator(data-datetime="Yesterday")
          // END timeline separator
          // START timeline item
          li
            .timeline-badge.success
              em.fa.fa-ticket
            .timeline-panel
              .popover.left
                .arrow
                .popover-content
                  .table-grid.table-grid-align-middle.mb
                    .col.col-xs
                      img.media-object.img-circle.thumb48(src='app/img/user/12.jpg', alt="Image")
                    .col
                      p.m0 
                        a(href="#").text-muted: strong Dennis Green
                        |  closed issue 
                        a(href="#") #548795
                      p.m0 
                        em &mdash; bootstrap.js needs update
          // END timeline item
          li.timeline-inverted
            .timeline-badge.warning
              em.fa.fa-ticket
            .timeline-panel
              .popover.right
                .arrow
                .popover-content
                  .table-grid.table-grid-align-middle.mb
                    .col.col-xs
                      img.media-object.img-circle.thumb48(src='app/img/user/09.jpg', alt="Image")
                    .col
                      p.m0 
                        a(href="#").text-muted: strong Ted Berry
                        |  assigned 
                        a(href="#").text-muted: strong Dennis Green
                        |  to issue 
                        a(href="#") #548795
                      p.m0 
                        em &mdash; bootstrap.js needs update
          // END timeline item
          // START timeline item
          li
            .timeline-badge.danger
              em.fa.fa-ticket
            .timeline-panel
              .popover.left
                .arrow
                .popover-content
                  .table-grid.table-grid-align-middle.mb
                    .col.col-xs
                      img.media-object.img-circle.thumb48(src='app/img/user/10.jpg', alt="Image")
                    .col
                      p.m0 
                        a(href="#").text-muted: strong Jon Perry
                        |  opened issue 
                        a(href="#") #548795
                      p.m0 
                        em &mdash; bootstrap.js needs update
          // END timeline item

          // START timeline item
          li.timeline-end
            a(href="#").timeline-badge
              em.fa.fa-plus
          // END timeline item
        // END timeline

      .col-lg-3
        .panel.panel-default
          .panel-body
            .text-center
              h3.mt0 Ted Berry
              p Lead director
            hr
            ul.list-unstyled.ph-xl
              li
                em.fa.fa-home.fa-fw.mr-lg
                | Somewhere, Neverland
              li
                em.fa.fa-briefcase.fa-fw.mr-lg
                a(href='#') Themicon.co
              li
                em.fa.fa-graduation-cap.fa-fw.mr-lg
                | Master Designer
        
        .panel.panel-default
          .panel-heading 
            a.pull-right(href="#"): em.icon-plus.text-muted
            | Contacts
          .list-group
              // START User status
              a(href="#").media.p.mt0.list-group-item
                span.pull-right
                  span.circle.circle-success.circle-lg
                span.pull-left
                  // Contact avatar
                  img.media-object.img-circle.thumb32(src='app/img/user/05.jpg', alt="Image")
                // Contact info
                span.media-body
                  span.media-heading
                    strong Juan Sims
                    br
                    small.text-muted Designeer
              // END User status
              // START User status
              a(href="#").media.p.mt0.list-group-item
                span.pull-right
                  span.circle.circle-success.circle-lg
                span.pull-left
                  // Contact avatar
                  img.media-object.img-circle.thumb32(src='app/img/user/06.jpg', alt="Image")
                // Contact info
                span.media-body
                  span.media-heading
                    strong Maureen Jenkins
                    br
                    small.text-muted Designeer
              // END User status
              // START User status
              a(href="#").media.p.mt0.list-group-item
                span.pull-right
                  span.circle.circle-danger.circle-lg
                span.pull-left
                  // Contact avatar
                  img.media-object.img-circle.thumb32(src='app/img/user/07.jpg', alt="Image")
                // Contact info
                span.media-body
                  span.media-heading
                    strong Billie Dunn
                    br
                    small.text-muted Designeer
              // END User status
              // START User status
              a(href="#").media.p.mt0.list-group-item
                span.pull-right
                  span.circle.circle-warning.circle-lg
                span.pull-left
                  // Contact avatar
                  img.media-object.img-circle.thumb32(src='app/img/user/08.jpg', alt="Image")
                // Contact info
                span.media-body
                  span.media-heading
                    strong Tomothy Roberts
                    br
                    small.text-muted Designer
              // END User status
              a(href="#").media.p.mt0.list-group-item.text-center.text-muted
                | View all contacts

        .panel.panel-default
          .list-group
            a.list-group-item(href='#')
              em.pull-right.fa.fa-users.fa-lg.fa-fw.text-muted.mt
              h4.list-group-item-heading 1000
              p.list-group-item-text Friends
            a.list-group-item(href='#')
              em.pull-right.fa.fa-rss.fa-lg.fa-fw.text-muted.mt
              h4.list-group-item-heading 3000
              p.list-group-item-text Subscriptions
            a.list-group-item(href='#')
              em.pull-right.fa.fa-map-marker.fa-lg.fa-fw.text-muted.mt
              h4.list-group-item-heading 100
              p.list-group-item-text Places
            a.list-group-item(href='#')
              em.pull-right.fa.fa-briefcase.fa-lg.fa-fw.text-muted.mt
              h4.list-group-item-heading 400
              p.list-group-item-text Projects
            a.list-group-item(href='#')
              em.pull-right.fa.fa-twitter.fa-lg.fa-fw.text-muted.mt
              h4.list-group-item-heading 17300
              p.list-group-item-text Twees
          